<template>
    <!-- 首页 -->
    <div class="homeContainer">
        <!-- 导航栏 -->
        <my-nav-bar :title="home.title"></my-nav-bar>
        <!-- 微页面组件 -->
        <micro-page 
            v-for="item in home.pageJson"
            :key="item['__zent-design-uuid__']"
            :pageInfo="item"
        ></micro-page>
        <!-- 底部栏 -->
        <my-tabbar :list="common.TabBar"></my-tabbar>
    </div>
</template>

<script>
// 引入 混入组件
import { pagemixin } from 'Mixins/pagemixin'
// 引入 公共组件
import MyNavBar from 'Components/common/MyNavBar'
import MyTabbar from 'Components/common/MyTabbar'
// 引入 首页模板
import MicroPage from 'Components/template/MicroPage'
// 引入 辅助函数
import { mapActions, mapState } from 'vuex'

export default {
    mixins: [pagemixin],
    components: {
        MyNavBar,
        MyTabbar,
        MicroPage
    },
    methods: {
        // 获取商城主页信息
        getIndex() {
            let params = {
                index: 'index',
                shopId: this.common.VisitShopId
            }
            this.getIndexInfo(params)
        },
        // 获取微页面信息
        async getStore() {
            let params = {
                pageId: this.common.wid
            }
            await this.getStoreInfo(params)
        },
        ...mapActions(['getIndexInfo', 'getStoreInfo', 'getAutoInfo'])
    },
    created() {
        // this.getIndex()
        this.getStore()        
    },
    computed: {
        ...mapState(['common', 'home'])
    }
}
</script>

<style lang="stylus">
    @import '~Css/_layout.styl'
    // 首页
    .homeContainer
        padding-top $navBarTop
        padding-bottom 50px
        overflow hidden
        // 头部
</style>

